/*
 * MinIO Cloud Storage (C) 2016, 2018 MinIO, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from "react"
import axios from "axios"
import { connect } from "react-redux"
import Alert from "../alert/Alert"
import * as actionsAlert from "../alert/actions"
import web from "../web"
import { Redirect, Link } from "react-router-dom"
import storage from 'local-storage-fallback'
import history from "../history"

export class FileInfo extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      name: "test1",
      uuid: "3255453-1232132-3435fsd-343rcx",
      storage: "minio",
      bucket: "http://"+window.location.hostname+":9000/mybucket",
      accessKey: "test",
      secretKey: "test",
      blocksize: 4096,
      compression: "lz4",
      // partitions: 0,
      // encryptkey: "",
    }
  }

  canMount() {
    storage.setItem('canmount',true)
    history.replace("/FilePage")

  }

  toProfile() {
    console.log(storage.getItem("logfilepath"))
    if(storage.getItem("logfilepath") == null){
      const { showAlert, clearAlert } = this.props
      showAlert("danger", "还没有挂载完成")
    }else {
      history.replace("/Profile")
    }
  }

  componentDidUpdate() {
      // console.log(this.state.bucket)
    if(window.location.pathname.indexOf('FileList') == -1 ){
      clearInterval(profileInterval)
    }
  }
  
  componentDidMount() {
    // this.setState({
    //   name: storage.getItem('Name'),
    //   uuid: storage.getItem('UUID'),
    //   storage: storage.getItem('Storage'),
    //   bucket: storage.getItem('Bucket'),
    //   accessKey: storage.getItem('AccessKey'),
    //   secretKey: storage.getItem('SecretKey'),
    //   blocksize: storage.getItem('BlockSize'),
    //   compression: parseInt(storage.getItem('Compression')),
    //   partitions: parseInt(storage.getItem('Partitions')),
    //   encryptkey: storage.getItem('EncryptKey'),
    // })
    const { showAlert, clearAlert, history } = this.props
    let message = ""
    // axios({
    //   method: 'post',
    //   url: "http://"+window.location.hostname+":1323/status",
    //   headers: {'Content-Type': 'application/json','Access-Control-Allow-Origin':'*'},
    //   data: {
    //     addr: storage.getItem('addr'),
    //   }
    // })
    // .then(
    //   (response)=>{})
      

    axios({
      method: 'post',
      url: "http://"+window.location.hostname+":1323/status",
      headers: {'Content-Type': 'application/json','Access-Control-Allow-Origin':'*'},
      data: {
        addr: storage.getItem('addr'),
      }
    })
    .then(
      (response)=>{
        // const { showAlert, clearAlert } = this.props
        // let message = ""
        if (response.status == 200){
          console.log(response.data)
          this.setState({
            name: response.data.Name,
            uuid: response.data.UUID,
            storage: response.data.Storage,
            bucket: response.data.Bucket,
            accessKey: response.data.AccessKey,
            // secretKey: response.data.SecretKey,
            blocksize: response.data.BlockSize,
            compression: response.data.Compression,
            // partitions: response.data.Partitions,
            // encryptkey: response.data.EncryptKey,
          })
          // showAlert("success", message)
        }
      }
    )
    .catch(
      (error)=>{
        console.log(error)
      }
    )

  }
  
  componentWillUnmount() {
    document.body.classList.remove("is-guest")
  } 


  render() {
    const { clearAlert, alert } = this.props
    let alertBox = <Alert {...alert} onDismiss={clearAlert} />
    if (!alert.message) alertBox = ""
    return (
      <div className="file-form">
        {alertBox}
        
        <div className="file-wrap">
          <div className="step-banner">
            <div className="step-title">
              <div className="step-title-icon">
                <i className="fa fa-info-circle" />
              </div>
              <div className="step-title-content">
                <h3>文件系统信息</h3>
                <p>用户创建的文件系统信息，在这里您可以看到当前用户的详细信息。</p>
              </div>
            </div>
          </div>
          <div className="step-form">
            <table>
              <thead>
                <tr>
                  <th>属性名</th>
                  <th>属性值</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>名称</td>
                  <td>{this.state.name}</td>
                </tr>
                <tr>
                  <td>UUID</td>
                  <td>{this.state.uuid}</td>
                </tr>
                <tr>
                  <td>对象存储</td>
                  <td>{this.state.storage}</td>
                </tr>
                <tr>
                  <td>桶</td>
                  <td>{this.state.bucket}</td>
                </tr>
                <tr>
                  <td>AccessKey</td>
                  <td>{this.state.accessKey}</td>
                </tr>
                {/* <tr>
                  <td>SecretKey</td>
                  <td>{this.state.secretKey}</td>
                </tr> */}
                <tr>
                  <td>块大小</td>
                  <td>{this.state.blocksize}</td>
                </tr>
                <tr>
                  <td>压缩</td>
                  <td>{this.state.compression}</td>
                </tr>
                {/* <tr>
                  <td>partitions</td>
                  <td>{this.state.partitions}</td>
                </tr>
                <tr>
                  <td>encryptkey</td>
                  <td>{this.state.encryptkey}</td>
                </tr> */}
                <tr>
                  <td></td>
                  <td>
                    <div className="step-btn">
                      <button className="step-next" onClick={this.canMount}>
                        挂载
                      </button>  
                      <button className="step-prev step-profile" onClick={this.toProfile.bind(this)}>
                        profile
                      </button>  
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
          
      </div>
    )
  }
}

const mapDispatchToProps = dispatch => {
  return {
    showAlert: (type, message) =>
      dispatch(actionsAlert.set({ type: type, message: message })),
    clearAlert: () => dispatch(actionsAlert.clear())
  }
}

export default connect(
  state => state,
  mapDispatchToProps
)(FileInfo)
